<template>
  <div class="about">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>关于我们</span>
        </div>
      </template>
      <p>这是一个使用Vue 3、Pinia和Vue Router的示例项目。</p>
      
      <el-card class="features-card">
        <template #header>
          <div class="card-header">
            <span>主要功能</span>
          </div>
        </template>
        <el-list>
          <el-list-item>
            <el-icon><Management /></el-icon>
            <span>使用Pinia进行状态管理</span>
          </el-list-item>
          <el-list-item>
            <el-icon><Location /></el-icon>
            <span>使用Vue Router进行路由管理</span>
          </el-list-item>
          <el-list-item>
            <el-icon><Monitor /></el-icon>
            <span>使用Element Plus提供响应式UI设计</span>
          </el-list-item>
        </el-list>
      </el-card>
      
      <el-divider>技术栈</el-divider>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="tech-card">
            <div class="tech-icon">
                <el-icon color="#42b883" size="48"><CirclePlus /></el-icon>
              </div>
            <div class="tech-name">Vue 3</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="tech-card">
            <div class="tech-icon">
              <el-icon color="#ff6b6b" size="48"><Grid /></el-icon>
            </div>
            <div class="tech-name">Element Plus</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="tech-card">
            <div class="tech-icon">
              <el-icon color="#3b82f6" size="48"><Box /></el-icon>
            </div>
            <div class="tech-name">Pinia</div>
          </el-card>
        </el-col>
      </el-row>
      
      <div class="navigation">
        <el-menu mode="horizontal" :router="true">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
          <el-menu-item index="/tools">工具库演示</el-menu-item>
        </el-menu>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { Management, Location, Monitor, CirclePlus, Grid, Box } from '@element-plus/icons-vue'
</script>

<style scoped>
.about {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.features-card {
  margin-top: 20px;
}

.el-list {
  padding: 10px;
}

.el-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.tech-card {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tech-icon {
  margin-bottom: 10px;
}

.tech-name {
  font-weight: bold;
}

.navigation {
  margin-top: 20px;
}
</style>